CSS @function: Išlaisvinkite individualių funkcijų apibrėžimų galią

Pakopiniai stilių aprašai (CSS) gerokai išsiplėtė už pagrindinio stiliaus ribų. Šiuolaikinis CSS suteikia kūrėjams galingų funkcijų, skirtų kurti dinamiškus, lengvai palaikomus ir keičiamo dydžio dizainus. Viena iš tokių funkcijų yra @function taisyklė, kuri leidžia jums apibrėžti individualias funkcijas tiesiogiai savo CSS, suteikiant galimybę naudoti pakartotinai pritaikomą logiką ir sudėtingus skaičiavimus tiesiai stilių aprašuose.

Kas yra CSS @function?

@function taisyklė CSS yra panaši į funkcijas programavimo kalbose, tokiose kaip JavaScript, Python ar PHP. Ji leidžia apibrėžti kodo bloką, kuris atlieka konkrečią užduotį ir grąžina reikšmę. Ši reikšmė gali būti naudojama CSS savybėse, todėl jūsų stilių aprašai tampa dinamiškesni ir lankstesni. Užuot pasikliovę tik statinėmis reikšmėmis ar integruota calc() funkcija, galite sukurti individualius skaičiavimus ir transformacijas, pritaikytas jūsų specifiniams dizaino poreikiams.

Skirtingai nuo CSS „mixin'ų“ (dažnai naudojamų preprocesoriuose, tokiuose kaip Sass ir Less), kurie iš esmės kopijuoja ir įklijuoja kodo blokus, @function iš tikrųjų grąžina reikšmę. Dėl to jos idealiai tinka atlikti skaičiavimus ir transformacijas, pagrįstas įvesties parametrais.

Kodėl verta naudoti CSS @function?

Štai keletas įtikinamų priežasčių įtraukti @function į savo CSS darbo eigą:

• Pakartotinis naudojimas: Apibrėžkite funkciją vieną kartą ir naudokite ją visame savo stilių apraše, taip sumažindami kodo dubliavimą ir pagerindami palaikomumą. Tai ypač naudinga dideliuose projektuose.
• Dinamiškas stilius: Atlikite skaičiavimus ir transformacijas, pagrįstas CSS kintamaisiais ar kitomis dinaminėmis įvestimis, kurdami prisitaikančius ir adaptyvius dizainus. Tai suteikia subtilesnę kontrolę, palyginti vien tik su medijos užklausomis.
• Temos kūrimas: Kurkite funkcijas, kurios generuotų spalvų paletes, tarpų skales ir kitus dizaino elementus, remiantis pagrindine tema. Tai supaprastina temų kūrimą ir leidžia lengvai jas pritaikyti.
• Sudėtingi skaičiavimai: Atlikite sudėtingas matematines operacijas ar eilučių manipuliacijas, kurias būtų sunku ar neįmanoma atlikti su standartinėmis CSS funkcijomis. Įsivaizduokite, kaip apskaičiuojate kraštinių santykius ar generuojate sudėtingus gradientus naudodami individualią logiką.
• Palaikomumas: Centralizuokite sudėtingą logiką funkcijose, kad jūsų CSS būtų lengviau suprantamas, derinamas ir modifikuojamas. Kai reikia atlikti pakeitimą, jums tereikia atnaujinti funkcijos apibrėžimą, o ne kelis to paties skaičiavimo atvejus.

Naršyklių palaikymas

@function taisyklę gerai palaiko šiuolaikinės naršyklės. Remiantis naujausiais atnaujinimais, visos pagrindinės naršyklės (Chrome, Firefox, Safari, Edge) visiškai palaiko @function taisyklę. Tačiau visada patikrinkite caniuse.com, kad patvirtintumėte naujausią naršyklių suderinamumo informaciją, ypač jei orientuojatės į senesnes naršyklių versijas.

CSS @function sintaksė

Pagrindinė @function taisyklės sintaksė yra tokia:

            @function function-name(parameter1, parameter2, ...) {
  // Function body (CSS code)
  @return value;
}

            

              
                Copy
              
            
          

Išnagrinėkime sintaksę:

• @function: Raktinis žodis, nurodantis funkcijos apibrėžimo pradžią.
• function-name: Funkcijos pavadinimas. Pasirinkite aprašomąjį pavadinimą, kuris atspindėtų funkcijos paskirtį. Laikykitės CSS pavadinimų suteikimo taisyklių (mažosios raidės, atskirtos brūkšneliais).
• (parameter1, parameter2, ...): Parametrų, kuriuos funkcija priima, sąrašas. Parametrai yra neprivalomi; funkcija gali neturėti parametrų arba turėti jų kelis.
• { ... }: Funkcijos kūnas, kuriame yra CSS kodas, kuris bus vykdomas, kai funkcija bus iškviesta.
• @return value;: @return sakinys nurodo reikšmę, kurią funkcija grąžins. Tai yra privaloma; kiekviena funkcija *privalo* grąžinti reikšmę. Reikšmė gali būti bet kokia galiojanti CSS reikšmė, pavyzdžiui, skaičius, eilutė, spalva ar ilgis.

Praktiniai CSS @function pavyzdžiai

Norėdami iliustruoti @function galią, panagrinėkime keletą praktinių pavyzdžių:

1. Pikselių konvertavimas į REM

Dažna užduotis interneto svetainių kūrime yra pikselių reikšmių konvertavimas į REM (root ems), siekiant geresnio pasiekiamumo ir prisitaikymo. Štai funkcija, kuri automatizuoja šį konvertavimą:

            @function rem($pixel-value) {
  $rem-value: $pixel-value / 16;
  @return #{$rem-value}rem;
}

body {
  font-size: 16px; // Base font size
}

h1 {
  font-size: rem(32); // Equivalent to 32px
}

p {
  font-size: rem(16); // Equivalent to 16px
}

            

              
                Copy
              
            
          

Šiame pavyzdyje:

• Funkcija rem() priima pikselių reikšmę ($pixel-value) kaip įvestį.
• Ji padalina pikselių reikšmę iš 16 (numatytasis naršyklės šrifto dydis), kad apskaičiuotų atitinkamą REM reikšmę.
• Ji grąžina apskaičiuotą REM reikšmę su pridėtu rem vienetu.

Ši funkcija gali būti naudojama visame jūsų stilių apraše, kad lengvai konvertuotumėte pikselių reikšmes į REM, užtikrinant nuoseklų ir keičiamo dydžio šriftų naudojimą.

2. Spalvų palečių generavimas

Nuoseklios spalvų paletės sukūrimas yra būtinas geram dizainui. Štai funkcija, skirta generuoti bazinės spalvos atspalvį pagal procentinę reikšmę:

            @function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

$primary-color: #007bff; // Example primary color (blue)

.button {
  background-color: $primary-color;
  border-color: shade($primary-color, 20%); // 20% darker shade of the primary color
  color: white;
}

            

              
                Copy
              
            
          

Šiame pavyzdyje:

• Funkcija shade() priima spalvą ($color) ir procentą ($percentage) kaip įvestį.
• Ji naudoja mix() funkciją (prieinamą kai kuriuose CSS preprocesoriuose), kad sumaišytų bazinę spalvą su juoda, sukurdama tamsesnį atspalvį. Jei naudojate standartinį CSS, apsvarstykite JavaScript „polyfill“ arba alternatyvią spalvų manipuliavimo funkciją.
• Ji grąžina sugeneruotą atspalvio spalvą.

Ši funkcija leidžia lengvai generuoti įvairius atspalvius jūsų spalvų paletei, užtikrinant vizualinį nuoseklumą visame dizaine.

3. Kraštinių santykio skaičiavimas

Kraštinių santykio išlaikymas yra labai svarbus prisitaikantiems paveikslėliams ir vaizdo įrašams. Štai funkcija, skirta apskaičiuoti elemento aukštį pagal jo plotį ir kraštinių santykį:

            @function aspect-ratio-height($width, $ratio-width, $ratio-height) {
  @return $width * ($ratio-height / $ratio-width);
}

.responsive-image {
  width: 100%;
  height: aspect-ratio-height(100%, 16, 9); // 16:9 aspect ratio
}

            

              
                Copy
              
            
          

Šiame pavyzdyje:

• Funkcija aspect-ratio-height() priima plotį ($width), kraštinių santykio plotį ($ratio-width) ir kraštinių santykio aukštį ($ratio-height) kaip įvestį.
• Ji apskaičiuoja aukštį pagal formulę: plotis * (santykio aukštis / santykio plotis).
• Ji grąžina apskaičiuotą aukščio reikšmę.

Ši funkcija užtikrina, kad elementas išlaikytų nurodytą kraštinių santykį, keičiantis jo pločiui, sukurdama prisitaikantį ir vizualiai patrauklų išdėstymą.

4. Atsarginių variantų ir matavimo vienetų valdymas

Taip pat galite naudoti funkcijas, kad tvarkytumėte skirtingus matavimo vienetus ar pateiktumėte atsarginius variantus, jei tam tikra CSS funkcija nėra palaikoma. Pavyzdžiui, galbūt norėsite naudoti vw vienetus šrifto dydžiams, bet pateikti pikselių atsarginį variantą senesnėms naršyklėms, kurios nepalaiko vw.

            @function responsive-font-size($viewport-width, $min-font-size, $max-font-size) {
  $calculated-size: calc(#{$min-font-size} + (#{$max-font-size} - #{$min-font-size}) * ((100vw - 320px) / (1200px - 320px)));
  @return clamp($min-font-size, $calculated-size, $max-font-size);
}

h1 {
  font-size: responsive-font-size(100vw, 20px, 40px); //Font size between 20px and 40px based on screen size
}

            

              
                Copy
              
            
          

Šiame pavyzdyje naudojama clamp() funkcija, siekiant užtikrinti, kad šrifto dydis išliktų nurodytose minimaliose ir maksimaliose ribose. Jei clamp() nepalaikoma, naršyklė naudos calc() reikšmę, kuri suteikia prisitaikantį šrifto dydį pagal peržiūros srities plotį.

Geriausios CSS @function naudojimo praktikos

Norėdami užtikrinti, kad jūsų @function naudojimas būtų efektyvus ir lengvai palaikomas, laikykitės šių geriausių praktikų:

• Rinkitės aprašomuosius pavadinimus: Suteikite savo funkcijoms aiškius ir aprašomuosius pavadinimus, kurie atspindėtų jų paskirtį. Tai padaro jūsų kodą lengviau suprantamą ir palaikomą. Pavyzdžiui, naudokite `calculate-padding` vietoj tiesiog `calc`.
• Funkcijos turi būti sutelktos: Kiekviena funkcija turėtų atlikti vieną, gerai apibrėžtą užduotį. Venkite kurti pernelyg sudėtingas funkcijas, kurios atlieka kelias pareigas.
• Išmintingai naudokite parametrus: Naudokite parametrus, kad jūsų funkcijos būtų lanksčios ir pakartotinai naudojamos. Venkite kietai koduoti reikšmes funkcijos kūne.
• Dokumentuokite savo funkcijas: Pridėkite komentarus, kad paaiškintumėte, ką kiekviena funkcija daro, kokius parametrus ji priima ir kokią reikšmę grąžina. Tai ypač svarbu sudėtingoms funkcijoms.
• Testuokite savo funkcijas: Kruopščiai testuokite savo funkcijas, kad įsitikintumėte, jog jos duoda laukiamus rezultatus skirtingose situacijose. Naudokite skirtingas įvesties reikšmes ir kraštutinius atvejus, kad nustatytumėte galimas problemas.
• Atsižvelkite į našumą: Nors @function gali būti galingos, sudėtingi skaičiavimai gali paveikti našumą. Optimizuokite savo funkcijas, kad sumažintumėte jų poveikį atvaizdavimo laikui. Kur tinkama, naudokite podėliavimo strategijas.
• Naudokite CSS kintamuosius: Integruokite CSS kintamuosius, kad valdytumėte funkcijos elgseną ir padarytumėte savo funkcijas lengvai pritaikomas. Tai leidžia vartotojams keisti dizaino aspektus, nekeičiant pačios CSS funkcijos kodo.
• Būkite atidūs matavimo vienetams: Įsitikinkite, kad jūsų funkcija naudoja teisingus matavimo vienetus, kitaip jūsų skaičiavimas gali neveikti, kaip tikėtasi. Visada pridėkite matavimo vienetą prie grąžinamos reikšmės.

@function ir „Mixins“ (Sass/Less) palyginimas

Jei esate susipažinę su CSS preprocesoriais, tokiais kaip Sass ar Less, jums gali kilti klausimas, kaip @function palyginama su „mixins“. Nors abi funkcijos skatina kodo pakartotinį naudojimą, jos tarnauja skirtingiems tikslams:

• @function: Grąžina reikšmę. Idealiai tinka skaičiavimams, transformacijoms ir reikšmių generavimui CSS savybėms.
• Mixins: Įtraukia CSS kodo bloką. Idealiai tinka taikyti stilių rinkinį elementui.

Galvokite apie tai taip: @function yra kaip funkcija programavimo kalboje, o „mixin“ yra kaip makrokomanda ar kodo fragmentas. Pasirinkite tinkamą įrankį, atsižvelgdami į konkrečią užduotį.

Štai pavyzdys, iliustruojantis skirtumą:

            /* @function (Sass) */
@function double($number) {
  @return $number * 2;
}

.element {
  width: double(10px); // Output: width: 20px;
}

/* Mixin (Sass) */
@mixin rounded-corners($radius) {
  border-radius: $radius;
  -moz-border-radius: $radius; /* For older Firefox versions */
  -webkit-border-radius: $radius; /* For older Safari/Chrome versions */
}

.box {
  @include rounded-corners(5px);
}

            

              
                Copy
              
            
          

Šiame pavyzdyje double() funkcija grąžina reikšmę (padvigubintą skaičių), o rounded-corners() „mixin“ įtraukia CSS kodo bloką (border-radius savybes).

Integracija su CSS kintamaisiais

Tikroji @function galia atsiskleidžia derinant ją su CSS kintamaisiais (individualiomis savybėmis). CSS kintamieji leidžia apibrėžti pakartotinai naudojamas reikšmes, kurias galima lengvai atnaujinti ir modifikuoti. Naudodami CSS kintamuosius savo funkcijose, galite sukurti labai pritaikomus ir dinamiškus stilių aprašus.

Štai pavyzdys, kaip naudoti CSS kintamuosius su @function, norint valdyti tarpus tarp elementų:

            :root {
  --base-spacing: 16px;
}

@function spacing($multiplier) {
  @return var(--base-spacing) * $multiplier;
}

.element {
  margin-bottom: spacing(2); // Output: margin-bottom: 32px (16px * 2);
}

.another-element {
  margin-top: spacing(0.5); // Output: margin-top: 8px (16px * 0.5);
}

            

              
                Copy
              
            
          

Šiame pavyzdyje --base-spacing CSS kintamasis apibrėžia bazinį tarpų vienetą. spacing() funkcija padaugina šį bazinį tarpą iš nurodyto daugiklio, kad apskaičiuotų faktinę tarpo reikšmę. Pakeitę --base-spacing reikšmę, galite lengvai koreguoti tarpus visame savo stilių apraše, nekeisdami pačios funkcijos.

Pažangios technikos ir aspektai

Sąlyginė logika funkcijų viduje

Nors CSS nėra visaverė programavimo kalba, galite naudoti sąlyginę logiką savo @function viduje, kad tvarkytumėte skirtingus scenarijus. Preprocesorių direktyvos, tokios kaip `@if` (Sass) ir `@when` (Less), gali būti naudojamos šakojimosi logikai.

            @function text-color($background) {
  @if (lightness($background) > 50%) {
    @return #000; // Return black for light backgrounds
  } @else {
    @return #fff; // Return white for dark backgrounds
  }
}

.element {
  background-color: #eee;
  color: text-color(#eee); // Output: color: #000;
}

            

              
                Copy
              
            
          

Ši funkcija dinamiškai parenka teksto spalvą pagal fono spalvos šviesumą, užtikrindama gerą kontrastą ir skaitomumą.

Klaidų valdymas ir patvirtinimas

Labai svarbu tvarkyti galimas klaidas ir patvirtinti įvesties reikšmes savo funkcijose, kad išvengtumėte netikėto elgesio. Nors CSS neturi integruotų klaidų valdymo mechanizmų, galite naudoti sąlyginę logiką, kad patikrintumėte neteisingą įvestį ir grąžintumėte numatytąją reikšmę arba parodytumėte įspėjimo pranešimą.

Pavyzdys (Sass):

            @function calculate-padding($size) {
  @if type-of($size) != number {
    @warn "Invalid padding size.  Please provide a numerical value.";
    @return 0px; // Default to 0px
  }
  @return $size * 2;
}

.element {
  padding: calculate-padding("small"); // Triggers a warning
}

            

              
                Copy
              
            
          

Vardų sritys (Namespaces)

Siekiant išvengti pavadinimų konfliktų, ypač dideliuose projektuose, apsvarstykite galimybę naudoti vardų sritis (namespaces) savo funkcijoms. Galite sukurti priešdėlį visoms savo individualioms funkcijoms, kad atskirtumėte jas nuo integruotų CSS funkcijų ar funkcijų iš kitų bibliotekų. Pavyzdžiui, visas savo funkcijas galite pradėti priešdėliu `my-` (pvz., `my-rem()`, `my-shade()`).

Išvada

@function taisyklė yra galingas CSS papildymas, leidžiantis kurti pakartotinai naudojamus, dinamiškus ir lengvai palaikomus stilių aprašus. Įvaldę šią funkciją, galite atverti naują lankstumo ir kontrolės lygį savo dizainuose, pagerinti savo darbo eigą ir sukurti sudėtingesnes bei patrauklesnes vartotojo patirtis. Nuo paprastų vienetų konvertavimo iki sudėtingų spalvų manipuliacijų, @function suteikia jums galimybę rašyti švaresnį, efektyvesnį CSS kodą. Eksperimentuokite su pateiktais pavyzdžiais ir tyrinėkite @function galimybes savo kitame projekte, kad pakeltumėte savo CSS įgūdžius ir sukurtumėte tikrai prisitaikančius ir keičiamo dydžio dizainus.